<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学成网</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body{
            background-color: #f3f5f7;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .all {
            width: 1920px;
            height: 3325px;

            margin: 0 auto;
        }

        .all-one {
            width: 100%;
            height: 100px;

        }

        .all-one .all-one-first {
            width: 190px;
            height: 43px;
            margin-left: 170px;
            line-height: 120px;
        }

        .all-one .all-one-second {
            width: 290px;
            height: 25px;

            margin-left: 440px;
            margin-top: -7px;
        }

        .all-one-second li {
            display: inline-block;
            margin-right: 40px;
        }

        .all-one-second li a {
            text-decoration: none;
            font-size: 14px;

        }

        .all-one .all-one-third {
            width: 410px;
            height: 40px;

            margin-left: 1105px;
            margin-top: -30px;
        }

        .all-one-third input {
            width: 360px;
            height: 100%;
            /*background-color:black;*/
            border: 1px solid #00a4ff;
            display: inline-block;
        }

        .all-one-third a {
            float: right;
            display: inline-block;
            font-size: 24px;
            color: #616161;
            width: 46px;
            height: 100%;
            text-align: center;
            border: 1px solid #e0e0e0;
            background-color: rgb(0,164,255);
        }

        .all-one-fourth {
            width: 100px;
            height: 25px;

            margin-left: 1505px;
            margin-top: -33px;

        }

        .all-one-fourth li {
            float: right;
            margin-top: -33px;

        }

        .all-one .all-one-fifth {
            width: 40px;
            height: 40px;

            margin-left: 1640px;
            margin-top: -30px;
            position: relative;
        }

        .big {
            display: inline-block;
            margin-left: 10px;
            position: absolute;
            margin-top: 10px;

        }

        .small {
            margin-top: -31px;
            float: right;
            margin-right: 9px;

            display: inline-block;
        }

        .all-one-sixth {
            width: 110px;
            height: 30px;

            margin-left: 1720px;
            margin-top: -35px;
        }

        .all-one-sixth img {
            display: inline-block;

            position: absolute;
        }

        .all-one-sixth li {
            float: right;
            line-height: 30px;
            margin-top: -35px;
        }

        .all-two {
            width: 100%;
            height: 420px;
            background-color: red;
        }

        .all-two img {
            position: absolute;

        }

        .all-two .all-two-one {
            width: 230px;
            height: 300px;
            background-color: #f5f5f5;
            z-index: 10;
            position: absolute;
            margin-left: 1332px;
            margin-top: 60px;
        }

        .all-two-one .all-two-one-first {
            width: 100%;
            height: 50px;
            background-color: #5bc0de;
        }

        .all-two-one-first h3 {
            text-align: center;
            line-height: 50px;
            color: #f5f5f5;
        }

        .all-two-one-second {
            width: 100%;
            height: 70px;
            position: absolute;

        }

        .all-two-one-second .fool {
            width: 200px;
            height: 19px;
            margin-left: 15px;
            margin-top: 10px;
        }

        .fool h3 {
            display: inline-block;
            font-size: 19px;
            color: rgb(90,90,90);
        }

        .fool h4 {
            float: right;
            color: rgb(90,90,90);
        }

        .all-two-one-second h5 {
            margin-left: 15px;
            margin-top: 3px;
            color: rgb(189,189,189);
        }

        .all-two-one-third {
            width: 100%;
            height: 60px;
            position: absolute;
            margin-top: 70px;
        }

        .all-two-one-third .fool {
            width: 200px;
            height: 19px;
            margin-left: 15px;
            margin-top: 7px;
        }

        .all-two-one-third h5 {
            margin-left: 15px;
            margin-top: 5px;
            color: rgb(189,189,189);
        }

        .all-two-one-fourth {
            width: 100%;
            height: 70px;

            position: absolute;
            margin-top: 130px;
        }

        .all-two-one-fourth .fool {
            width: 200px;
            height: 19px;
            margin-left: 15px;
            margin-top: 10px;

        }

        .all-two-one-fourth .fool h3 {
            display: inline-block;
            font-size: 19px;
            color: #5bc0de;
        }

        .all-two-one-fourth .fool h4 {
            float: right;
            color: #5bc0de;
        }

        .all-two-one-fourth h5 {
            margin-left: 15px;
            margin-top: 3px;
            color: #5bc0de;
        }

        .all-two-one-fifth {
            width: 200px;
            height: 40px;
            margin-top: 195px;
            margin-left: 15px;
            border: 1px solid #5bc0de;
        }

        .all-two-one-fifth li {

            font-size: 20px;
            position: absolute;
            margin-top: 5px;
            margin-left: 60px;
            font-weight: bold;
            color: #5bc0de;
        }

        .all-three {
            width: 100%;
            height: 70px;

        }

        .all-three .all-three-one {
            width: 1200px;
            height: 20px;
            margin-left: 400px;
            position: absolute;
            margin-top: 20px;
        }

        .all-three-one li {
            display: inline-block;
            float: left;
            margin-right: 61px;
        }

        .all-three-one .close .open {
            float: right;
            color: #5bc0de;
        }

        .all-four {
            width: 1220px;
            height: 2520px;
            margin: 0 auto;
        }

        .all-four-one {
            width: 100%;
            height: 80px;

        }

        .all-four-one h1 {
            line-height: 80px;
            margin-left: 5px;
            color: #333333;
            display: inline-block;
        }

        .all-four-one-first {
            width: 95px;
            height: 20px;

            float: right;
            margin-top: 30px;

        }

        .all-four-one-first li {
            font-size: 12px;
            color: #5bc0de;
        }

        .all-four-two {
            width: 100%;
            height: 555px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .all-four .all-four-two .paiban {
            display: flex;
            justify-content: space-between;
        }

        .list-item {
            width: 228px;
            height: 270px;
            background-color: #fff;
            position: relative;
        }

        .list-item .name {
            width: 160px;
            height: 38px;
            margin: 25px auto 0;
            font-size: 14px;
            cursor: pointer;
        }

        .study {
            margin-top: 10px;
            margin-left: 33px;
        }

        .list-item .study span:first-child {
            color: #ff6700;
        }

        .list-item .study span {
            font-size: 12px;
            float: left;
        }

        .list-item .study i {
            display: inline-block;
            margin: 6px 8px;
            box-sizing: border-box;
            width: 4px;
            height: 4px;
            border: 2px solid #666666;
            border-radius: 50%;
            float: left;
        }

        .all-four-three {
            margin-top: 18px;
            height: 452px;
        }

        .biaoti {
            height: 60px;
            line-height: 60px;
        }

        .biaoti .left {
            float: left;
            cursor: pointer;
            font-size: 18px;
            color: #444444;
        }

        .biaoti .right {
            float: right;
            margin-right: 15px;
            font-size: 14px;
            color: #aaaaaa;
            cursor: pointer;
        }

        .biaoti .center {
            text-align: center;
        }

        .biaoti .center span {
            margin: 0 20px;
            cursor: pointer;
        }

        .all-four-three .php .left-img {
            float: left;
            width: 228px;
            height: 392px;
        }

        .all-four-three .php .right-img {
            float: right;
            width: 965px;
            height: 392px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .all-four-three .php .right-img .right-bottom {
            height: 270px;
            display: flex;
            justify-content: space-between;
        }

        .engineer {
            margin-top: 30px;
            height: 330px;
            display: flex;
            flex-direction: column;
        }

        .engineer ul {
            display: flex;
            justify-content: space-between;

        }

        .engineer .biaoti {
            display: inline-block;
            float: top;
        }

        .engineer .biaoti {

            width: 1220px;
            height: 60px;
        }
        .out{
            color: #5bc0de;
        }
        .last {
            width: 100%;
            height: 420px;
            margin: 40px 0 0;
            background: #FFFFFF;
        }
        .last .center {
            width: 1200px;
            height: 420px;
            margin: 0 auto;
        }
        .last .center .app {
            margin: 0 0 0 18px;
            position: relative;
            width: 445px;
            height: 420px;
            display: inline-block;
        }
        .last .center .app .img {
            background: url(imgs/学成在线.png);
            width: 195px;
            height: 42px;
            position: absolute;
            top: 32px;
        }
        .last .center .app .introduce {
            width: 100%;
            position: absolute;
            top: 100px;
            font-size: 12px;
            color: #444444;
        }
        .last .center .app .download {
            width: 120px;
            height: 36px;
            cursor: pointer;
            background: url(imgs/下载APP.png);
            position: absolute;
            top: 150px;
        }
        .last .center ul {
            display: inline-block;
            float: right;
            margin: 32px 45px;
        }
        .last .center ul li:first-child {
            font-size: 20px;
            color: #333333;
            height: 40px;
            line-height: 40px;
        }
        .last .center ul li {
            cursor: pointer;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="all-one">
        <div class="all-one-first">
            <img src="imgs/学成在线.png" height="43" width="189"/>
        </div>
        <div class="all-one-second">
            <li>首页</li>
            <li>课程</li>
            <li>职业规划</li>
        </div>
        <div class="all-one-third">
            <input type="text">
            <a href=""><i class="fa fa-search "></i></a>
        </div>
        <div class="all-one-fourth">
            <li>个人中心</li>
        </div>

        <div class="all-one-fifth">
            <img src="imgs/图层 158.png" height="16" width="14" class="big">
            <img src="imgs/椭圆 6.png" height="6" width="6" class="small">
        </div>
        <div class="all-one-sixth">
            <img src="imgs/20130502185029_EkKYh 拷贝.png" height="30" width="30"/>
            <li>qq-leishui</li>
        </div>
    </div>
    <div class="all-two">
        <img src="imgs/bg.png" height="420" width="1919" style="display: inline-block">
        <div class="all-two-one">
            <div class="all-two-one-first">
                <h3>我的课程表</h3>
            </div>
            <div class="all-two-one-second">
                <div class="fool">
                    <h3>继续学习</h3>
                    <h4>程序语言设计</h4>
                </div>
                <h5>正在学习-使用对象</h5>
            </div>
            <div class="all-two-one-third">
                <div class="fool">
                    <h3>继续学习</h3>
                    <h4>程序语言设计</h4>
                </div>
                <h5>正在学习-使用对象</h5>
            </div>
            <div class="all-two-one-fourth">
                <div class="fool">
                    <h3>继续学习</h3>
                    <h4>程序语言设计</h4>
                </div>
                <h5>正在学习-使用对象</h5>
            </div>
            <div class="all-two-one-fifth">
                <li>全部课程</li>
            </div>
        </div>
    </div>

    <div class="all-three">
        <div class="all-three-one">
            <ul class="close">
                <li style="color: #5bc0de">精品推荐</li>
                <li>jQuery</li>
                <li>spark</li>
                <li>MySQL</li>
                <li>javaWeb</li>
                <li>MySQL</li>
                <li>javaWeb</li>
                <li class="open">修改兴趣</li>
            </ul>
        </div>


    </div>
    <div class="all-four">
        <div class="all-four-one">
            <h1>精品推荐</h1>
            <div class="all-four-one-first">
                <li>查看全部</li>
            </div>
        </div>
        <div class="all-four-two">
            <div class="paiban">
                <li class="list-item">

                    <img src="imgs/p4.png" height="155" width="225"/>
                    <div class="new"></div>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p2.png" height="155" width="228"/>
                    <div class="hot"></div>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p1.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p5.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">
                    <!--<div class="new"></div>-->
                    <img src="imgs/p5.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
            </div>
            <div class="paiban">
                <li class="list-item">

                    <img src="imgs/p4.png" height="155" width="225"/>
                    <div class="new"></div>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p2.png" height="155" width="228"/>
                    <div class="hot"></div>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p1.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <img src="imgs/p5.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">
                    <!--<div class="new"></div>-->
                    <img src="imgs/p5.png" height="155" width="228"/>
                    <div class="name">
                        Think PHP 5.0 博客系统实战项目演练
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
            </div>
        </div>
        <div class="all-four-three">
            <div class="biaoti">
                <div class="left">编程入门</div>
                <div class="right">查看更多</div>
                <div class="center"><span class="out">热门</span><span>初级</span><span>中级</span><span>高级</span></div>
            </div>
            <div class="php">
                <div class="left-img">

                    <img src="imgs/椭圆 6 拷贝 16.png" height="392" width="228"/></div>
                <div class="right-img">
                    <div class="right-top">
                        <img src="imgs/图层 6.png" height="100" width="965"/></div>
                    <div class="right-bottom">
                        <li class="list-item">
                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 7.png" height="154" width="228"/>
                            <div class="name">
                                Android Hybrid APP 开发实战H5+原生
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">

                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 10.png" height="154" width="230"/>
                            <div class="name">
                                Kami2首页界面切换效果
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">
                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 9.png" height="156" width="228"/>
                            <div class="name">
                                unity Profiler入门
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">

                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 11.png" height="156" width="228"/>
                            <div class="name">
                                Cocos2d 引擎源码中的纹理优化
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
        <div class="all-four-three">
            <div class="biaoti">
                <div class="left">编程入门</div>
                <div class="right">查看更多</div>
                <div class="center"><span class="out">热门</span><span>初级</span><span>中级</span><span>高级</span></div>
            </div>
            <div class="php">
                <div class="left-img">

                    <img src="imgs/椭圆 7 拷贝 16.png" height="392" width="228"/></div>
                <div class="right-img">
                    <div class="right-top">
                        <img src="imgs/python.png" height="100" width="957"/></div>
                    <div class="right-bottom">
                        <li class="list-item">
                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 10.png" height="154" width="230"/>
                            <div class="name">
                                Android Hybrid APP 开发实战H5+原生
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">

                            <!--<div class="new"></div>-->

                            <img src="imgs/图层 7.png" height="154" width="228"/>
                            <div class="name">
                                Kami2首页界面切换效果
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">
                            <!--<div class="new"></div>-->

                            <img src="imgs/图层 11.png" height="156" width="228"/>
                            <div class="name">
                                unity Profiler入门
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                        <li class="list-item">

                            <!--<div class="new"></div>-->
                            <img src="imgs/图层 9.png" height="156" width="228"/>
                            <div class="name">
                                Cocos2d 引擎源码中的纹理优化
                            </div>
                            <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
        <div class="engineer">
            <div class="biaoti">
                <div class="left">机器学习工程师</div>
                <div class="right">查看更多</div>
                <div class="center"><span class="out">热门</span><span>初级</span><span>中级</span><span>高级</span></div>
            </div>
            <ul>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 7.png" height="154" width="228"/>
                    <div class="name">
                        Android Hybrid APP 开发实战H5+原生
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 11.png" height="156" width="228"/>
                    <div class="name">
                        Cocos2d 引擎源码中的纹理优化
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 9.png" height="156" width="228"/>
                    <div class="name">
                        unity Profiler入门
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 14.png" height="156" width="228"/>
                    <div class="name">
                        微软人工智能-数据分析平台
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 10.png" height="154" width="230"/>
                    <div class="name">
                        Kami2首页界面切换效果
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
            </ul>
        </div>
        <div class="engineer">
            <div class="biaoti">
                <div class="left">机器学习工程师</div>
                <div class="right">查看更多</div>
                <div class="center"><span class="out">热门</span><span>初级</span><span>中级</span><span>高级</span></div>
            </div>
            <ul>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 14.png" height="154" width="228"/>
                    <div class="name">
                        Android Hybrid APP 开发实战H5+原生
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 9.png" height="156" width="228"/>
                    <div class="name">
                        Cocos2d 引擎源码中的纹理优化
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 11.png" height="156" width="228"/>
                    <div class="name">
                        unity Profiler入门
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 10.png" height="156" width="228"/>
                    <div class="name">
                        微软人工智能-数据分析平台
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
                <li class="list-item">

                    <!--<div class="new"></div>-->
                    <img src="imgs/图层 7.png" height="154" width="230"/>
                    <div class="name">
                        Kami2首页界面切换效果
                    </div>
                    <div class="study"><span>高级</span><i></i><span>1125人在学习</span></div>
                </li>
            </ul>
        </div>
        <div class="last">
            <div class="center">
                <div class="app">
                    <div class="img"></div>
                    <div class="introduce">
                        学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作推出在线课程。2017年XTCG Inc.保留所有权利。-沪ICP备15023144号
                    </div>
                    <div class="download"></div>
                </div>
                <ul class="parter">
                    <li>和做伙伴</li>
                    <li>合作机构</li>
                    <li>合作导师</li>
                </ul>
                <ul class="guide">
                    <li>新手指南</li>
                    <li>如何注册</li>
                    <li>如何选课</li>
                    <li>如何拿到毕业证</li>
                    <li>学分是什么</li>
                    <li>考试未通过怎么办</li>
                </ul>
                <ul class="about">
                    <li>关于学成网</li>
                    <li>关于</li>
                    <li>管理团队</li>
                    <li>工作机会</li>
                    <li>客户服务</li>
                    <li>帮助</li>
                </ul>

            </div>
        </div>
    </div>

</div>
</body>
</html>